<template>
  <div class="edit-header">
    <p>广告活动</p>
  </div>
  <a-form style="max-width: 900px" :model="campaignInfo">
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item field="shopId" label="店铺：" label-col-flex="140px">
          <p>{{ campaignInfo.shopName }}</p>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="campaignName" label="广告活动名称：" label-col-flex="140px">
          <p>{{ campaignInfo.campaignName }}</p>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item field="portfolioInfo.portfolioId" label="广告组合：" label-col-flex="140px">
          <p>{{ campaignInfo.portfolioName }}</p>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="startDate" label="广告活动时间：" label-col-flex="140px">
          <p>{{ campaignInfo.startDate }}~{{ campaignInfo.endDate }}</p>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item field="budget" label="每日预算：" label-col-flex="140px">
          <p>{{ currency }}{{ campaignInfo.budgetAmount }}</p>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="targetingType" label="投放类型：" label-col-flex="140px">
          <p>{{ campaignInfo.targetingType === 'AUTO' ? '自动投放' : '手动投放' }}</p>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item field="budget" label="竞价策略：" label-col-flex="140px">
          <p>{{ DynamicBudgetStrategy[campaignInfo.dynamicBudgetStrategy] || '未知' }}</p>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="targeting" label="根据广告位调整竞价：" label-col-flex="140px">
          <p>搜索结果顶部(首页)：{{ campaignInfo.adjustmentAdsPlacementTopSearchPercentage }}%</p>
          <p style="margin-left: 20px">商品页面：{{ campaignInfo.adjustmentAdsPlacementProductDetailPercentage }}%</p>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { DynamicBudgetStrategy } from '../../types'
  const props = defineProps({
    campaignInfo: {
      type: Object,
      default: () => {},
    },
  })
  // 币种
  const currency = ref('USD')
</script>
<style lang="less" scoped>
  .edit-header {
    background-color: var(--color-fill-2) !important;
    border-left: 2px solid rgb(var(--primary-6));
    line-height: 32px;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 20px;
  }
  :deep(.arco-input-prepend) {
    padding: 0;
  }
</style>
